<template>
	<view>
		<view class="nav-bar">
			<NavBar>
				<navigator open-type="navigateBack" hover-class="none" class="nav-back-view" slot="left">
					<image src="/static/nav-back-icon.png" class="nav-back"></image>
				</navigator>
				<view slot="center" class="nav-title">银行账户</view>
				<view @click="onBankingInsert" class="nav-right-view" slot="right">
					<image src="/static/nav-add.png" class="nav-add"></image>
					<view>新增</view>
				</view>
			</NavBar>
		</view>
		<view v-for="(item, index) in dataList" :key="index" class="card-view" @click="onBankEvent(item)">
			<view class="name-view">{{item.bankBranch}}</view>
			<view class="user-name">{{item.name}}</view>
			<view class="desc-text">{{item.bankNumber}}</view>
			<view v-if="status != 1" class="button-view">
				<view class="button-item" @click.stop="onEditEvent(item)">
					<image src="/static/bianji@2x.png" class="button-icon"></image>
					<view>编辑</view>
				</view>
				<view class="button-item" @click.stop="onDeleteEvent(item, index)">
					<image src="/static/shanchu@2x.png" class="button-icon"></image>
					<view>删除</view>
				</view>
			</view>
			<view v-else style="height: 18upx;"></view>
		</view>
		<Empty v-if="!dataList.length"></Empty>
		<view style="height: 160upx;"></view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				status: 0,
				dataList: [],
				queryData: {
					pageNo: 1,
					pageSize: 15,
				}
			}
		},
		onLoad(options) {
			this.status = options.status || 0
			this.getRequestList()
		},
		onPullDownRefresh() {
			this.queryData.pageNo = 1
			this.getRequestList()
		},
		onReachBottom() {
			this.queryData.pageNo += 1
			this.getRequestList()
		},
		methods: {
			onEditEvent(item) {
				uni.navigateTo({
					url: `/pagesMine/bankingInsert/bankingInsert?detailId=${item.bankId}`,
					events: {
						backEvent: () => {
							this.queryData.pageNo = 1
							this.getRequestList()
						}
					}
				})
			},
			onBankEvent(item) {
				if (this.status != '1') return
				this.openerEvent(item)
				uni.navigateBack()
			},
			async onDeleteEvent(item, index) {
				const boo = await uni.$util.showModal('确定删除该地址吗?')
				if (!boo) return
				uni.$util.showLoading()
				await uni.$api.getBankDelete(item.bankId).finally(uni.finally)
				this.dataList.splice(index, 1)
				await uni.$util.showSuccess()
			},
			async getRequestList() {
				uni.$util.showLoading()
				const res = await uni.$api.getBankList(this.queryData).finally(uni.finally)
				const list = res.data.rows || []
				this.queryData.total = res.data.totalRows
				this.dataList = this.queryData.pageNo == 1 ? list : this.dataList.concat(list)
			},
			onBankingInsert() {
				uni.navigateTo({
					url: '/pagesMine/bankingInsert/bankingInsert',
					events: {
						backEvent: () => {
							this.queryData.pageNo = 1
							this.getRequestList()
						}
					}
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.nav-bar {
		position: sticky;
		top: 0;
		left: 0;
		z-index: 20;

		.nav-back-view {
			@extend .column;

			.nav-back {
				width: 43upx;
				height: 43upx;
			}
		}

		.nav-title {
			font-size: 33rpx;
			font-family: PingFangSC, PingFang SC;
			font-weight: 400;
			color: #FFFFFF;
		}

		.nav-right-view {
			@extend .column;
			font-size: 22rpx;
			font-family: PingFangSC, PingFang SC;
			font-weight: 400;
			color: #FFFFFF;

			.nav-add {
				width: 31upx;
				height: 31upx;
			}
		}

	}

	.card-view {
		width: 707rpx;
		background: #FFFFFF;
		border-radius: 14rpx;
		padding: 18upx 29upx;
		padding-bottom: 0;
		margin: 0 auto;
		margin-top: 18upx;

		.name-view {
			width: 100%;
			@extend .row-start;
			font-size: 29rpx;
			font-weight: 600;
			color: #2C1101;
		}

		.user-name {
			width: 100%;
			font-size: 25rpx;
			font-weight: 600;
			color: #B8ACA3;
			margin-top: 10upx;
		}

		.desc-text {
			width: 100%;
			font-size: 25rpx;
			font-weight: 600;
			color: #B8ACA3;
			margin-top: 10upx;
		}

		.button-view {
			width: 100%;
			@extend .row-end;
			padding: 25upx 0;
			border-top: 1px solid #F7E8E4;
			margin-top: 30upx;

			.button-item {
				@extend .row;
				font-size: 25rpx;
				font-weight: 400;
				color: #2C1101;

				.button-icon {
					width: 29upx;
					height: 29upx;
					margin-right: 9upx;
				}
			}

			.button-item+.button-item {
				color: #FF2615;
				margin-left: 54upx;
			}
		}
	}
</style>